<template>
	<view class="list">
		<view class="fixbg" :style="{'background-image':'url('+playList.coverImgUrl+')'}"></view>
		<musichead title="歌单" :icon="true" color="white"></musichead>
		<view class="container" v-show="!isLoading">
			<scroll-view scroll-y="true">
				<view class="list-head">
					<view class="list-head-img">
						<image :src="playList.coverImgUrl"></image>
						<text class="iconfont iconyousanjiao">{{ playList.playCount | formatCount }}</text>
					</view>
					<view class="list-head-text">
						<view>{{playList.name}}</view>
						<view>
							<image :src="playList.creator.avatarUrl"></image>{{playList.creator.nickname}}
						</view>
						<view>{{ playList.description }}</view>
					</view>
				</view>
				<!-- 小程序分享按钮 -->
				<!-- #ifdef MP-WEIXIN -->
					<button class='list-share' open-type="share">
						<text class="iconfont iconbofang1"></text>分享给微信好友
					</button>
				<!-- #endif -->
				
				<!-- 音乐列表 -->
				<view class="list-music">
					
					<view class="list-music-head">
						<text class="iconfont iconbofang"></text>
						<text>播放全部</text>
						<text>(共{{ playList.trackCount }}首)</text>
					</view>
							
					<view class="list-music-item" v-for="(item,index) in playList.tracks" :key="index" @tap="handleDetail(item.id)">
						<view class="list-music-top">{{index+1}}</view>
						<view class="list-music-song">
							<view>{{item.name}}</view>
							<view>
								<image v-if="privileges[index].flag > 60 && privileges[index].flag < 70 " src="../../static/dujia.png"></image>
								<image v-if="privileges[index].maxbr == 999000 " src="../../static/sq.png"></image>
								{{item.ar[0].name}}-{{item.name}}
							</view>
						</view>
						<text class="iconfont iconbofang"></text>
					</view>
					
				</view>
				
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { playListDetail } from '../../common/api.js'
	export default {
		data() {
			return {
				playList:{
					coverImgUrl:'',
					creator:{
						avatarUrl:''
					}
				},
				privileges:[],
				isLoading:true
			};
		},
		onLoad(options){
			//页面加载中，弹窗提示
			uni.showLoading({
				title:"数据加载中"
			})
			playListDetail(options.id).then(res=>{
				if(res.data.code == 200){
					this.playList = res.data.playlist
					this.privileges = res.data.privileges
					//将歌单歌曲id保存到状态管理中
					this.$store.commit('INIT_TOPLISTIDS',res.data.playlist.trackIds)
					//页面加载完毕，隐藏弹窗提示
					this.isLoading = false
					uni.hideLoading()
				}
			})
		},
		methods:{
			handleDetail(songId){
				uni.navigateTo({
					url:'/pages/detail/detail?songId='+songId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
@import url("../../common/iconfont.css");	
	
.list-head{
	display: flex;
	margin: 30rpx;
	.list-head-img{
		width: 265px;
		height: 265rpx;
		border-radius: 30rpx;
		overflow: hidden;
		position: relative;
		margin-right: 42rpx;
		image{
			width: 100%;
			height: 100%;
		}
		text{
			position: absolute;
			right: 8rpx;
			top: 8rpx;
			color: white;
			font-size: 26rpx;
		}
	}
	.list-head-text{
		font-size: 24rpx;
		color: #f0f2f7;
		view:nth-child(1){
			font-size: 34rpx;
		}
		view:nth-child(2){
			display: flex;
			margin:20rpx 0;
			font-size: 24rpx;
			align-items: center;
			image{
				width: 52rpx;
				height: 52rpx;
				border-radius: 50%;
				margin-right: 14rpx;
			}
		}
		view:nth-child(3){
			line-height: 34rpx;
			font-size: 32rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
}
.list-share{
	width: 330rpx;
	height: 74rpx;
	margin: 0 auto;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 37rpx;
	color: white;
	text-align: center;
	line-height: 74rpx;
	font-size: 28rpx;
	text{
		margin-right: 16rpx;
	}
}
.list-music{
	 background: white;
	 margin-top: 40rpx;
	 border-radius: 50rpx;
	.list-music-head{
		height: 50rpx;
		margin: 30rpx 0 70rpx 22rpx;
		text:nth-child(1){
			height: 50rpx;
			font-size: 50rpx;
		}
		text:nth-child(2){
			font-size: 30rpx;
			margin: 0 10rpx 0 26rpx;
		}
		text:nth-child(3){
			font-size: 26rpx;
			color: #b2b2b2;
			
		}
	}
	.list-music-item{
		display: flex;
		align-items: center;
		margin: 0 32rpx 66rpx 46rpx;
		color: #959595;
		.list-music-top{
			width: 50rpx;
			font-size: 30rpx;
			line-height: 30rpx;
		}
		.list-music-song{
			flex: 1;
			margin-left: 20rpx;
			view:nth-child(1){
				font-size: 28rpx;
				color: black;
				width: 70vw;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			view:nth-child(2){
				font-size: 20rpx;
				width: 70vw;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				image{
					width: 32rpx;
					height: 20rpx;
					margin-right: 10rpx;
				}
				
			}
		
		}
		text{
			font-size: 50rpx;
			color: #c7c7c7;
		}
	}
}
</style>
